<template>
  <div class="recharge-detail-page" :class="{ animate: showAnimation }">
    <TopNavBar :title="_t18('withdraw_detail')" type="back" />

    <div class="detail-container">
      <div class="info-card">
        <div class="row">
          <span class="label">{{ _t18('recharge_coin') }}</span>
          <span class="value">{{ props.data.type }}</span>
        </div>

        <div class="row">
          <span class="label">{{ _t18('recharge_amount') }}</span>
          <span class="value">{{ props.data.amount }} USD</span>
        </div>

        <div class="row">
          <span class="label">{{ _t18('recharge_status') }}</span>
          <span
            class="value"
            :class="{
              success: props.data.status == 1,
              pending: props.data.status == 0,
              fail: props.data.status == 2
            }"
          >
            {{
              props.data.status == 0
                ? _t18('recharge_waiting')
                : props.data.status == 1
                ? _t18('recharge_tab_success')
                : _t18('recharge_tab_error')
            }}
          </span>
        </div>

        <div class="row">
          <span class="label">{{ _t18('recharge_time') }}</span>
          <span class="value">{{ _timeFormat(props.data.createTime || props.data.params?.createTime) }}</span>
        </div>

        <div class="row">
          <span class="label">{{ _t18('orderCode') }}</span>
          <Copy :data="`${props.data.serialId}`">
            <template #copyMsg>
              <span class="value">{{ props.data.serialId }}</span>
            </template>
          </Copy>
        </div>

        <div class="row">
          <span class="label">{{ _t18('gemini2_Bank_card_number') }}</span>
          <Copy :data="`${props.data.toAdress}`">
            <template #copyMsg>
              <span class="value address">{{ props.data.toAdress }}</span>
            </template>
          </Copy>
        </div>

        <div class="progress-container">
          <div class="progress-steps">
            <div
              v-for="(step, index) in steps"
              :key="index"
              class="step"
              :class="{ active: index < currentStep }"
            >
              <div class="circle">{{ index + 1 }}</div>
              <div class="label">{{ step }}</div>

              <div
                v-if="index < steps.length - 1"
                class="connector"
                :class="{ active: index + 1 < currentStep }"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted, computed } from 'vue'
import { _t18 } from '@/utils/public'
import Copy from '@/components/common/Copy/index.vue'
// 引入 TopNavBar，如果它是一个外部组件
// import TopNavBar from '@/components/common/TopNavBar/index.vue' 

function _timeFormat(timeStr) {
  if (!timeStr) return '-'
  const match = timeStr.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{1,2}):(\d{2})(?::(\d{2}))?/)
  if (!match) return timeStr
  const [, y, m, d, h, min, s = '00'] = match
  const hour = parseInt(h, 10)
  const ampm = hour >= 12 ? 'PM' : 'AM'
  const displayHour = hour % 12 === 0 ? 12 : hour % 12
  return `${y}-${m}-${d} ${displayHour}:${min}:${s} ${ampm}`
}

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const showAnimation = ref(false)
// ------------------- 提现进度条逻辑 (已修改) -------------------
const steps = [_t18('23_submit'), _t18('15_pending'), _t18('15_success')]

// 当前进度：根据状态判断
// status: 0=等待中(处理中), 1=成功, 2=失败
const currentStep = computed(() => {
  // 状态 0 (处理中): 激活步骤 0 和 1 (提交, 处理中)
  if (props.data.status === 0) return 2 
  // 状态 1 (成功): 激活所有步骤 0, 1, 2 (提交, 处理中, 成功)
  if (props.data.status === 1) return 3 
  
  // 状态 2 (失败) 或其他情况: 默认只激活步骤 0
  // 如果失败时只显示第一步为高亮，则设置为 1；如果所有步骤都保持灰色，则设置为 0
  // 假设失败时，只激活提交步骤（步骤0）
  if (props.data.status === 2) return 1 

  return 0 // 初始状态，无高亮
})

onMounted(() => {
  setTimeout(() => (showAnimation.value = true), 40)
})
</script>


<style scoped>
/* ====== 页面样式 ====== */
.recharge-detail-page {
  min-height: 100vh;
  background: #f7f8fa;
  overflow: hidden;
  font-family: 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: 300;
  position: relative;
}

/* ====== 内容区域样式（去掉顶部空白）====== */
.detail-container {
  padding: 0 16px 16px;
  margin-top: -30px; /* 上移内容，抵消 TopNavBar 高度 */
  transform-origin: left bottom;
  transform: rotateZ(-18deg) scale(0.92) translate(-8px, 20px);
  opacity: 0;
  transition:
    transform 700ms cubic-bezier(.2, .7, .2, 1),
    opacity 520ms ease;
  will-change: transform, opacity;
}

/* 动画展开 */
.recharge-detail-page.animate .detail-container {
  transform: rotateZ(0deg) scale(1) translate(0, 0);
  opacity: 1;
}

/* ===== 覆盖导航栏的默认留白（保险） ===== */
:deep(.top-nav-bar),
:deep(.TopNavBar) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ===== 信息卡片 ===== */
.info-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 0;
  margin: 12px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-weight: 300;
}

/* ===== 行样式 ===== */
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.row:last-child {
  border-bottom: none;
}

/* ===== 文本样式 ===== */
.label {
  color: #999;
  font-size: 15px;
  font-weight: 300;
}
.value {
  color: #111;
  font-size: 15px;
  font-weight: 300;
  text-align: right;
  word-break: break-all;
}
.address {
  color: #000;
  font-weight: 300;
}

/* ===== 状态颜色 ===== */
.value.success {
  color: #00c693;
}
.value.pending {
  color: #ffaa00;
}
.value.fail {
  color: #fa190c;
}

/* ================= 提现进度条 (已修改) ================= */
.progress-container {
  background: #fff;
  border-radius: 12px;
  padding: 24px 16px;
  margin-top: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

/* 步骤圆点 - 默认灰色 */
.step .circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dcdcdc; /* 默认灰色 */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s;
  z-index: 1;
}

/* 激活状态圆点 - 黑色 */
.step.active .circle {
  background: #000; 
}


/* 步骤标签 - 默认灰色 */
.step .label {
  margin-top: 8px;
  font-size: 13px;
  color: #888; 
  text-align: center;
  transition: color 0.3s;
}

/* 激活状态标签 - 黑色粗体 */
.step.active .label {
  color: #000;
  font-weight: 600;
}


/* 连接线样式 - 默认灰色 */
.connector {
  position: absolute;
  top: 14px;
  left: 100%; /* 增大此值，向右偏移 */
  width: calc(100% - 0px); /* 连接线的宽度 */
  height: 3px;
  background: #dcdcdc; /* 默认灰色 */
  border-radius: 2px;
  z-index: 0;
  transform: translateX(-50%); /* 保持线条水平居中 */
}

/* 激活状态线条 - 黑色 */
.connector.active {
  background: #000; 
}

</style>